import React, { useContext, useState, useEffect, useRef } from 'react';
import { useUsers } from "../../hook/users";
import { useHistory, useParams } from "react-router-dom";
import { AudioOutlined } from '@ant-design/icons';
import { Table, Input, Button, Form ,Card,Breadcrumb,Tag} from 'antd';
import { Pagination, Popconfirm, Space,message } from 'antd';
import usersApi from "../../api/users.js";

const EditableContext = React.createContext(null);


export default () => {
    let [{ rows, curPage, maxPage, total }, { getUsers, setCurPageUsers, setEachPageUsers }] = useUsers();
    let dataInfo = rows;
    useEffect(() => {
        getUsers();
    }, [getUsers]);

    const columns = [
        {
            title: '用户ID',
            dataIndex: '_id',
            render: text => <a>{text}</a>,
            align: 'center',
            width: "250px"
        },
        {
            title: '用户名',
            dataIndex: 'username',
            align: 'center',
            width: "220px",
        },
        {
            title: '用户密码',
            dataIndex: 'password',
            align: 'center',
            width: "190px"
        },
        {
            title: '用户电话',
            dataIndex: 'phone',
            align: 'center',
            width: "260px",
            // render: (text, record) => (
            //     <span>{record.commoditiesId.name}</span>
            //   )
        },
        {
            title: '用户默认地址',
            dataIndex: 'site',
            align: 'center',
            width: "260px",
            render: (text, record) => (
                // console.log(record.site),
                <span>{record.site[0]}</span>
              )
        },
        {
            title: '购物车ID',
            dataIndex: 'cartsId',
            align: 'center',
            width: "190px"
        },
        {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (text, record) => (
                <Space size="middle">
                    <Popconfirm title="确认删除？" onConfirm={() => handleDelete(record._id)}>
                        <Button type="primary" shape="round" danger>删除</Button>
                    </Popconfirm>
                </Space>
            ),
        },
    ];

    async function handleDelete(_id) {
        // console.log(_id);
        const status = await usersApi.removeUsers({ _id })
        if (status == 200) {
            message.success({
                content: "删除成功！！！",
                duration: 1,
                onClose: () => {
                    getUsers();
                }
            });
        } else {
            message.error('删除失败！！！', () => {
            });
        
    }
}

        const { Search } = Input;

        const suffix = (
        <AudioOutlined
            style={{
            fontSize: 16,
            color: '#1890ff',
            }}
        />
        );

        const  onSearch = async value => {

            console.log(dataInfo);
            const _id = value;
            const data = await usersApi.findOne( _id );
            dataInfo = [data];
            console.log(dataInfo);

        };

    return<div className="site-card-border-less-wrapper">
    <Space direction="vertical" style={{ width: "100%" }}>
      <Card>
        <Breadcrumb>
          <Breadcrumb.Item>主页</Breadcrumb.Item>
          {/* <Breadcrumb.Item>优惠券</Breadcrumb.Item> */}
          <Breadcrumb.Item>
          <a pef="#/info/addCoupons">用户列表</a>
          </Breadcrumb.Item>
        </Breadcrumb>
        <Search
            placeholder="请输入用户相关信息"
            enterButton="搜索"
            size="large"
            style={{width:"500px", marginTop: "20px"}}
            suffix={suffix}
            onSearch={onSearch}
        />
      </Card>
      <Card style={{  }}>
      <Table
            rowKey={record => record._id}
            columns={columns}
            pagination={{
                total,
                onChange: (page, pageSize) => {
                    setCurPageUsers(page);
                    setEachPageUsers(pageSize);
                },
              }}
            dataSource={dataInfo}
            expandable={{
                expandedRowRender: record => <tbody style={{ margin: 0 }}>
                    {/* <tr style={{}}>{record.orderInfo.map(item=>item.commoditiesName)}</tr>
                    <tr style={{}}>{record.orderInfo.map(item=>item.count)}</tr>
                    <tr style={{}}>{record.orderInfo.map(item=>item.price)}</tr> */}
                    </tbody>,
                rowExpandable: record => record.userId !== 'Not Expandable',
              }}
        />
      </Card>
    </Space>
  </div>
}
